{% extends 'base.html' %}
{% load static %}

{% block title %}系统参数配置 - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
    .parameter-group {
        background: white;
        border-radius: 10px;
        margin-bottom: 20px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .group-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        font-weight: bold;
    }
    
    .parameter-item {
        border-bottom: 1px solid #eee;
        padding: 15px 20px;
        transition: background-color 0.3s;
    }
    
    .parameter-item:hover {
        background-color: #f8f9fa;
    }
    
    .parameter-item:last-child {
        border-bottom: none;
    }
    
    .parameter-key {
        font-family: 'Courier New', monospace;
        background: #f8f9fa;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.9em;
    }
    
    .parameter-type {
        font-size: 0.8em;
        color: #6c757d;
    }
    
    .parameter-value {
        font-family: 'Courier New', monospace;
        background: #e9ecef;
        padding: 8px 12px;
        border-radius: 4px;
        border: none;
        width: 100%;
        resize: vertical;
    }
    
    .readonly-parameter {
        background-color: #f8f9fa;
        opacity: 0.7;
    }
    
    .filter-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-cogs"></i> 系统参数配置</h2>
                <div>
                    <button class="btn btn-outline-secondary" onclick="location.reload()">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                </div>
            </div>
            
            <!-- 筛选条件 -->
            <div class="filter-card">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">参数分组</label>
                        <select name="group" class="form-select">
                            <option value="">全部分组</option>
                            {% for group in all_groups %}
                                <option value="{{ group }}" {% if group_filter == group %}selected{% endif %}>{{ group }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">搜索</label>
                        <input type="text" name="search" class="form-control" placeholder="搜索参数名称、键或描述..." value="{{ search_query }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary d-block w-100">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- 参数列表 -->
            {% for group, parameters in grouped_parameters.items %}
            <div class="parameter-group">
                <div class="group-header">
                    <i class="fas fa-folder"></i> {{ group }}
                    <span class="badge bg-light text-dark ms-2">{{ parameters|length }} 个参数</span>
                </div>
                
                {% for parameter in parameters %}
                <div class="parameter-item {% if parameter.is_readonly %}readonly-parameter{% endif %}">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <h6 class="mb-1">{{ parameter.name }}</h6>
                            <div class="parameter-key">{{ parameter.key }}</div>
                            <div class="parameter-type mt-1">
                                <span class="badge bg-info">{{ parameter.get_param_type_display }}</span>
                                {% if parameter.is_readonly %}
                                    <span class="badge bg-warning">只读</span>
                                {% endif %}
                                {% if not parameter.is_active %}
                                    <span class="badge bg-secondary">已禁用</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            {% if parameter.description %}
                                <small class="text-muted">{{ parameter.description }}</small>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <form method="post" action="{% url 'assets:system_parameter_edit' parameter.pk %}" class="parameter-form">
                                {% csrf_token %}
                                {% if parameter.param_type == 'boolean' %}
                                    <select name="value" class="form-select parameter-value" {% if parameter.is_readonly %}disabled{% endif %}>
                                        <option value="true" {% if parameter.get_typed_value %}selected{% endif %}>是</option>
                                        <option value="false" {% if not parameter.get_typed_value %}selected{% endif %}>否</option>
                                    </select>
                                {% elif parameter.param_type == 'text' %}
                                    <textarea name="value" class="parameter-value" rows="3" {% if parameter.is_readonly %}readonly{% endif %}>{{ parameter.value }}</textarea>
                                {% else %}
                                    <input type="text" name="value" class="parameter-value" value="{{ parameter.value }}" {% if parameter.is_readonly %}readonly{% endif %}>
                                {% endif %}
                            </form>
                        </div>
                        <div class="col-md-1">
                            {% if not parameter.is_readonly %}
                                <button type="button" class="btn btn-sm btn-primary save-parameter" data-form=".parameter-form" data-parameter-id="{{ parameter.pk }}">
                                    <i class="fas fa-save"></i>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                    
                    {% if parameter.default_value %}
                    <div class="row mt-2">
                        <div class="col-12">
                            <small class="text-muted">
                                <i class="fas fa-info-circle"></i> 默认值: <code>{{ parameter.default_value }}</code>
                            </small>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if parameter.updated_at and parameter.updated_by %}
                    <div class="row mt-2">
                        <div class="col-12">
                            <small class="text-muted">
                                <i class="fas fa-clock"></i> 最后更新: {{ parameter.updated_at|date:"Y-m-d H:i:s" }} 
                                by {{ parameter.updated_by.username }}
                            </small>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% empty %}
            <div class="text-center text-muted py-5">
                <i class="fas fa-inbox fa-3x mb-3"></i>
                <p>暂无系统参数</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 保存参数
    $('.save-parameter').click(function() {
        const button = $(this);
        const form = button.closest('.parameter-item').find('.parameter-form');
        const parameterId = button.data('parameter-id');
        
        button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        
        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: form.serialize(),
            success: function(response) {
                showAlert('success', '参数保存成功');
                button.prop('disabled', false).html('<i class="fas fa-save"></i>');
            },
            error: function(xhr) {
                let message = '参数保存失败';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                showAlert('error', message);
                button.prop('disabled', false).html('<i class="fas fa-save"></i>');
            }
        });
    });
    
    // 参数值变化时启用保存按钮
    $('.parameter-value').on('input change', function() {
        const saveButton = $(this).closest('.parameter-item').find('.save-parameter');
        saveButton.removeClass('btn-primary').addClass('btn-warning');
    });
    
    // 显示提示信息
    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        // 在页面顶部显示提示
        if ($('.alert-container').length === 0) {
            $('<div class="alert-container"></div>').prependTo('.container-fluid');
        }
        $('.alert-container').html(alertHtml);
        
        // 3秒后自动消失
        setTimeout(function() {
            $('.alert').alert('close');
        }, 3000);
    }
});
</script>
{% endblock %}